<template>
  <div class="camera-test">
    <!-- 显示拍照组件 -->
    <CameraCapture 
      v-if="currentView === 'camera'"
      @back="handleBack"
      @complete="handleComplete"
      @capture="handleCapture"
      @preview="handlePreview"
    />
    
    <!-- 显示作业提交详情组件 -->
    <HomeworkSubmissionDetail 
      v-if="currentView === 'detail'"
      :captured-photos="capturedPhotos"
      @back="handleBackToCamera"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import CameraCapture from '@/components/shared/Camera/CameraCapture.vue'
import HomeworkSubmissionDetail from '@/components/shared/Views/HomeworkSubmissionDetail.vue'

const router = useRouter()

// 接口定义
interface CapturedPhoto {
  id: string
  thumbnail: string
  fullImage: string
  timestamp: number
  processed?: boolean
}

// 当前显示的视图
const currentView = ref<'camera' | 'detail'>('camera')
const capturedPhotos = ref<CapturedPhoto[]>([])

// 处理返回事件
const handleBack = () => {
  console.log('返回上一页')
  // 这里可以添加路由跳转逻辑
}

// 处理完成拍照事件
const handleComplete = (photos: CapturedPhoto[]) => {
  console.log('拍照完成，照片数量:', photos.length)
  capturedPhotos.value = photos
  currentView.value = 'detail'
}

// 处理拍照事件
const handleCapture = (photos: CapturedPhoto[]) => {
  console.log('拍照事件:', photos.length)
  capturedPhotos.value = photos
}

// 从详情页返回拍照页
const handleBackToCamera = () => {
  currentView.value = 'camera'
}

// 处理照片预览事件
const handlePreview = (data: { photos: CapturedPhoto[], currentIndex: number, taskName: string }) => {
  console.log('预览照片:', data)
  // 跳转到照片预览页面
  router.push({
    name: 'photo-preview',
    query: {
      photos: JSON.stringify(data.photos),
      currentIndex: data.currentIndex.toString(),
      taskName: data.taskName
    }
  })
}
</script>

<style scoped>
.camera-test {
  width: 100%;
  height: 100vh;
}
</style>
